<template>
  <div>
    <div class="baseLogin">

      <!-- Unnamed (动态面板)-->
      <div id="u292" class="ax_default" style="left: -730.5px; width: 2781px;">
        <div id="u292_state0" class="panel_state" data-label="State1" style="width: 2781px;">
          <div id="u292_state0_content" class="panel_state_content" style="margin-left: 730.5px;">
          </div>
        </div>
      </div>

      <div id="u328" class="ax_default box_2">
        <div id="u328_div" class=""></div>
        <div id="u328_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <div id="u329" class="ax_default line">
        <img id="u329_img" class="img " src="@/components/css/images/login/u329.svg">
        <div id="u329_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- 登录和注册选项 -->
      <div class="login-options">
        <div id="u330" class="ax_default _三级标题 selected" selectiongroup="tab" style="cursor: pointer;">
          <div id="u330_div" class="selected" tabindex="0"></div>
          <div id="u330_text" class="text ">
            <p id="cache0"><span id="cache1" style="color: rgb(255, 110, 144);">账号登录</span></p>
          </div>
        </div>
        <div id="u331" class="ax_default _三级标题" selectiongroup="tab" style="cursor: pointer;">
          <div id="u331_div" class="" tabindex="0"></div>
          <div id="u331_text" class="text ">
            <p><span><el-link @click="handleClickToRegister()" :underline="false">用户注册</el-link></span></p>
          </div>
        </div>
      </div>

      <div class="login-container">
        <el-form ref="loginForm" class="login-form" :model="loginForm">

          <!-- 用户名输入框 -->
          <el-form-item>
            <el-input v-model="loginForm.accountName" placeholder="请输入用户名" style="color: rgb(153, 153, 153);">
              <template slot="prefix">
                <i style="font-size:20px" class="el-icon-user"></i>
              </template>
            </el-input>
          </el-form-item>

          <!-- 密码输入框 -->
          <el-form-item>
            <el-input v-model="loginForm.password" placeholder="请输入密码" maxlength="6"
                      style="color: rgb(153, 153, 153);">
              <template slot="prefix">
                <i style="font-size:20px" class="el-icon-key"></i>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click.native="flushCode()"
                       style="cursor: pointer; font-size: 10px; height: 30px; padding-right: 20px; display: inline-block; line-height: 0px;">
              <span>点我获取验证码</span>
            </el-button>
            <el-input v-model="loginForm.verifyCode" placeholder="请输入验证码"
                      style="display: inline-block; vertical-align: middle;">
            </el-input>
          </el-form-item>

          <!-- 登录按钮 -->
          <el-form-item style="text-align: center;">
            <el-button type="primary" style="cursor: pointer; font-size: 20px; width: 200px; height: 60px;">
              <span @click="submitForm()">点击登录</span>
            </el-button>
          </el-form-item>

        </el-form>
      </div>

    </div>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  </div>
</template>


<script>
import {Message} from "element-ui";

export default {
  name: "LoginView",
  data() {
    return {
      loginForm: {
        accountName: '',
        password: '',
        verifyCode: ''
      },
      codeId: '',
    };
  },

  methods: {
    handleClickToRegister() {
      // 跳转到注册页面
      this.$router.push("/register");
    },

    submitForm() {
      if (this.loginForm.verifyCode === this.codeId && this.loginForm.verifyCode != "") {
        // 使用 axios 来提交数据
        let url = "/api/login";
        // 这种方式传参：就是普通的传参方式：
        let params = new URLSearchParams();
        params.append("accountName", this.loginForm.accountName);
        params.append("password", this.loginForm.password);

        this.$axios.post(url, params)
            .then((res) => {
              if (res.data.code === 200) {
                Message({
                  type: "success",
                  message: res.data.msg,
                  duration: 1000
                })
                // 登录成功之后，得到后端返回的 token
                let token = res.headers['authentication'];

                // 把 token 存在本地缓存里
                sessionStorage.setItem("token", token);
                sessionStorage.setItem("accountName", this.loginForm.accountName)
                sessionStorage.setItem("accountId", res.data.data.accountId)
                /*sessionStorage.setItem("isLoggedIn", true)*/
                this.$router.push("/");
                window.location.reload();
              } else {
                Message({
                  type: "error",
                  message: res.data.msg,
                  duration: 1000
                })
              }
            })
      } else {
        console.log('error submit!!');
        Message({
          type: "error",
          message: "对不起，请正确填写数据",
          duration: 1000
        })
      }
      return false;
    },

    flushCode() {
      this.$axios.get('/getCode')
          .then((json) => {
            this.codeId = json.data.data.codeId;
            Message({
              type: "code",
              message: "验证码为：" + json.data.data.codeId,
              duration: 10000
            })
          })
    }
  }
}

</script>

<style scoped>
.login-container {
  text-align: left;
  margin: auto;
  margin-top: 180px;
  width: 350px;
  padding: 15px 35px 15px 35px;
  position: absolute;
  top: 130px;
  left: 790px;
}

.login-title {
  margin: 0px auto 48px auto;
  text-align: center;
  font-size: 40px;
}

.svg-container {
  width: 24px;
  height: 24px;
  display: inline-block;
}

.svg-img {
  width: 100%;
  height: 100%;
}

.primary-button {
  width: 100%;
}

.el-button--primary {
  color: #FFF;
  background-color: rgba(255, 110, 144, 1);
  border-color: #ff6e90;
}

.login-container[data-v-5c6101e4] {
  text-align: left;
  margin: auto;
  margin-top: 150px;
  width: 350px;
  padding: 15px 35px 15px 35px;
  position: absolute;
  top: 130px;
  left: 790px;
  padding-inline: 30px;
}

.login-container[data-v-5c6101e4][data-v-5c6101e4] {
  padding: 15px 35px 15px 35px;
}

</style>